<template>
     <!-- 聊天界面 -->
     <div class="frame-message " v-if="!isEmpty(messageDetail)">

          <div class="title-frame flexal">

            <div class="avatar" v-if="avatarList.length !=0">
              <img v-for="(item,index) in avatarList" :src="item" :class="computedAvatar(avatarList)" :key="index"  />
            </div>
            <div v-else>
            <img :src="messageDetail.avatar"  class="imgIcon-avatar" @mouseenter="onMouseOver4" @mouseleave="onMouseOut4"/>
            <div class="info-frame" v-if="openInfoFrame&&messageDetail.type==0"  @mouseenter="onMouseOver5" @mouseleave="onMouseOut5">
              <img :src="messageDetail.avatar"  style="width: 77px;height: 78px;border-radius: 50%;margin-top: 127px;margin-left: 21px;"/>
              <div class="flexal">
                <div style="font-weight: 500;font-size:20px;color: #333333;margin-left: 40px;">姓名</div>
                <img :src="require('@/assets/img/message/start.png')" v-if="messageDetail.start"  style="width: 16px;height: 16px;margin-left: 7px;"/>
              </div>
              <div class="flexal" style="padding-left: 9px;margin-top: 23px;">
                <div class="info-frame-item flexcumal">
                  <img :src="require('@/assets/img/messageRight/inof-message.png')" style="width: 28px;height: 28px;margin-top: 10px;"/>
                  <div style="font-weight: 400;font-size: 13px;color: #000000;">消息</div>
                </div>
                <div class="info-frame-item flexcumal">
                  <img :src="require('@/assets/img/messageRight/info-audio.png')" style="width: 28px;height: 28px;margin-top: 10px;"/>
                  <div style="font-weight: 400;font-size: 13px;color: #000000;">语音</div>
                </div>
                <div class="info-frame-item flexcumal">
                  <img :src="require('@/assets/img/messageRight/info-video.png')" style="width: 28px;height: 28px;margin-top: 10px;"/>
                  <div style="font-weight: 400;font-size: 13px;color: #000000;">视频</div>
                </div>
              </div>
              <div class="info-frame-buttom">
                <div class="flexal" style="height: 50%;">
                  <div style="flex:1;font-weight: 400;font-size: 16px;color: #000000;margin-left: 19px;">备注与描述</div>
                  <div style="font-weight: 400;font-size: 14px;color: #6E6E6E;">编辑内容</div>
                  <img :src="require('@/assets/img/right.png')"  style="width: 8px;height: 14px;margin-right: 18px;margin-left: 12px;" />
                </div>
                <div style="width: 352px;height: 0px;border: 1px solid #707070;opacity: 0.17;margin-left: 18px;"></div>
                <div class="flexal" style="height: 50%;">
                  <div style="flex:1;font-weight: 400;font-size: 16px;color: #000000;margin-left: 19px;">设为星标联系人 </div>
                  <el-switch v-model="setStart" active-color="#0052D9" inactive-color="#DCDFE6" style="margin-right: 18px;"></el-switch>
                </div>
              </div>
            </div>
            </div>
            <div class="title-content">
              <div class="flexal" style="width: 400px;">
                <div class="ellipsis title-text">{{messageDetail.name}}</div>
                <div class="flexal" v-if="messageDetail.type == 1">
                <img :src="require('@/assets/img/messageRight/people.png')"  style="width: 16px;height: 17px; margin-left: 13px;" />
                <div class="title-num">3</div>
                </div>
                <img :src="require('@/assets/img/message/start.png')" v-if="messageDetail.start"  style="width: 16px;height: 16px;margin-left: 7px;"/>
              </div>
              <!-- 标题菜单栏 -->
              <div class="flexal" style="margin-top: 5px;">
                <template v-for="(item,index) in optList">
                  <div class="title-item flexal" :class="optListIndex == index? 'title-item-active':''"  :key="index" @click="chooseTabIndex(index)" v-if="item.type <= messageDetail.type && messageDetail.type < 2">
                    <img :src="optListIndex == index? item.activeIcon : item.icon"  style="width: 13px;height: 13px;" />
                    <div class="title-text-item" :class="optListIndex == index? 'title-text-item-active':''">{{item.text}}</div> 
                  </div>
                </template>
              </div>
            </div>

            <div class="flexal" v-if="messageDetail.type <=1">
            <!--  -->
            <img :src="require('@/assets/img/messageRight/peopleButton.png')"  style="width: 28px;height: 28px;margin-right: 18px;" @click="inDevelopment" />
            <!-- 视频图标 -->
             <div>
            <img :src="require('@/assets/img/messageRight/video.png')"  @mouseenter="onMouseOverO" @mouseleave="onMouseOutO" style="width: 25px;height: 19px;margin-right: 17px;margin-top: 5px;"/>
            <div class="frame-video-block" v-if="phoneShow"  @mouseenter="onMouseOverT" @mouseleave="onMouseOutT">
              <div class="flexal" style="height: 50%;" @click="openTelePhone">
                <img :src="require('@/assets/img/messageRight/voice.png')"  style="width: 21px;height: 21px;margin-left: 13px;"/>
                <div style="font-weight: 400;font-size: 16px;color: #333333;margin-left: 8px;">语音通话</div>
              </div>
              <div class="flexal" style="margin-top: 10px;" @click="openTelePhone">
                <img :src="require('@/assets/img/messageRight/video-phone.png')"  style="width: 21px;height: 21px;margin-left: 13px;"/>
                <div style="font-weight: 400;font-size: 16px;color: #333333;margin-left: 8px;">视频通话</div>
              </div>
            </div>
            </div>
            <div>
              <!-- 远程桌面图片 -->
            <img :src="require('@/assets/img/messageRight/computer.png')"  @mouseenter="onMouseOver2" @mouseleave="onMouseOut2" style="width: 20px;height: 19px;margin-right: 17px;margin-top: 5px;"/>
            <div class="frame-video-block" style="width: 190px;" v-if="openComputer"  @mouseenter="onMouseOver3" @mouseleave="onMouseOut3">
              <div class="flexal" style="height: 50%;" @click="openLongFrame(0)">
                <img :src="require('@/assets/img/messageRight/ad41d0703ccdbfd7600a85710eeba68.png')"  style="width: 21px;height: 21px;margin-left: 13px;"/>
                <div style="font-weight: 400;font-size: 16px;color: #333333;margin-left: 8px;">请求控制对方电脑</div>
              </div>
              <div class="flexal" style="margin-top: 10px;" @click="openLongFrame(1)">
                <img :src="require('@/assets/img/messageRight/a40b7579c498c9ab0db1adeec58c444.png')"  style="width: 21px;height: 21px;margin-left: 13px;"/>
                <div style="font-weight: 400;font-size: 16px;color: #333333;margin-left: 8px;">邀请对方远程协助</div>
              </div>
            </div>
            </div>
            </div>
            <!-- 更多图标 -->
            <div style="width: 25px;height: 19px;" class="flexcen" @click="openOptShow">
            <img :src="require('@/assets/img/messageRight/more.png')"  style="width: 23px;height: 5px;"/>
            </div>
          </div>

          <!-- 操作弹窗 -->
          <optMessage v-if="optShow" :messageDetail="messageDetail"></optMessage>
          <!-- 云文档/文件界面 -->
          <documentFrame v-if="optListIndex ==1 || optListIndex == 3" :optListIndex="optListIndex"></documentFrame>
          <!-- 公告界面 -->
          <afficheFrame v-if="optListIndex == 2" @afficheSubimt="afficheSubimt"></afficheFrame>
          <!-- 发送签收消息界面 -->
           <signInFrame v-if="optListIndex == 4" @signInSubmit="signInSubmit" :list="list"></signInFrame>
           <!-- 审批详情 -->
          <auditFrame v-if="auditShow" :detail="auditList[auditIndex]"></auditFrame>
          <!-- 远程桌面 -->
          <longFrame v-if="longFrameShow" @longFrameSubmit="longFrameSubmit" :type="longFrameType"></longFrame>


          <!-- 公告浮窗 -->
          <div class="frame-notice flexal" v-if="noticeShow&&messageDetail.type==1">
              <img :src="require('@/assets/img/messageRight/notice-audio.png')"  style="width: 19px;height: 19px;margin-left: 17px;" />
              <div class="notice-content ellipsis">群公告文字内容文字内容文字内容群公告文字内容文字内容文字内容群公告文字内容文字内容文字内容群公告文字内容文字内容文字内容</div>
          </div>
            
          <!-- 消息内容 -->
          <div class="content-frame" :style="{'height':(noticeShow&&messageDetail.type==1)? '612px':'670px'}" v-infinite-scroll="scrollLoad" v-if="messageDetail.type <= 1 || messageDetail.type == 4">
            <!-- 占位 -->
            <!-- <div class="frame-notice" style="position: relative;opacity: 0;"></div> -->
             
            <!-- 创建群时的时间 -->
            <div class="chat-time flexcen">昨天10:00</div>

            <!-- 聊天界面群操作 -->
            <div class="frame-notice-title flexcumal">
              <div class="notice-title">欢迎加入群组</div>
              <div class="notice-title-tips">你可以尝试以下操作，快速开始协作</div>
              <div class="flexal" style="margin-top: 21px;">
                <div class="notcie-title-button flexcen" style="margin-right: 21px;">完善群消息</div>
                <div class="notcie-title-button flexcen">完善群公告</div>
              </div>
              <!-- 创建通知 -->
              <div class="tips-name flexal">
                张三
                <p style="font-weight: 400;font-size: 14px;color: #858585;margin-left: 9px;">创建了群组</p>
              </div>
            </div>
            
            <div v-for="(message, index) in messages" :key="index">
              <!-- 消息时间 -->
              <div class="chat-time flexcen" v-if="message.type=='time'">{{message.content}}</div>
              <!-- 邀请通知 -->
              <div class="tips-name" style="display: flex;justify-content: center;margin-top: 20px;" v-if="index == 0">
                张三
                <span style="font-weight: 400;font-size: 14px;color: #858585;margin-left: 15px;width: 350px;text-align: center;">邀请李四、XXX、XXX 加入此群，新成员入群可查看所有]历史消息</span>
              </div>

        <!-- 消息整体(这个数据不包括时间)-->
        <div :class="message.sender==='me'?'chat-message-me':'chat-message-other'"
             :style="{'padding-bottom':messages.length-1===index?'2rem':'none'}"
             v-if="message.type!='time'"
             >
            
          <!--            消息头像-->
          <div :class="message.sender==='me'?'message-me-asWhole-headPortrait':'message-other-asWhole-headPortrait'">
            <img :src="src" class="examineeFace_logo_style">
          </div>
          <!--          消息-->
          <div :class="message.sender==='me'?'message-me-asWhole-right':'message-other-asWhole-right'">
            <!--            消息上面-->
            <div :class="message.sender==='me'?'message-me-asWhole-top':'message-other-asWhole-top'">
              考生
            </div>
            <!-- 文本消息 -->
            <div :class="message.sender==='me'?'':'flexal'">
            <div :class="message.sender==='me'?'message-me':'message-other'" v-if="message.type == 'text' ">
              {{ message.content }}
            </div>
            <!-- 图片消息 -->
            <img :src="message.content" class="meesage-img" model="aspectFit" v-if="message.type == 'image' " />
            <!-- 视频消息 -->
            <video :src="message.content" class="meesage-img" :controls="true" v-if="message.type == 'video' "></video>
            <!-- 文件消息 -->
            <div :class="message.sender==='me'?'message-me':'message-other'" v-if="message.type == 'file' ">
                <div  :style="{'display': 'flex','justify-content': 'space-between','flex-direction': message.sender==='me'? 'row':'row-reverse'}">
                <div style="margin-left: 10px;">
                    <div class="meesage-file-text">{{message.content}}</div>
                    <div class="meesage-file-text1">{{message.size}}</div>
                </div>
                <div>
                    <img :src="fileIcon[message.suffix]"  style="width: 48px;height: 46px;" />
                </div>
                </div>
            </div>
            <!-- 签收消息 -->
            <div :class="message.sender==='me'?'message-me':'message-other'" v-if="message.type == 'sign' " style="width: 200px;">
              <div>{{ message.content }}</div>
              <div style="width: 100%;height: 0px;border: 1px solid #002565;opacity: 0.26;margin-top: 10px;"></div>
              <div style="width: 100%;" class="flexcen">
                <div class="message-signButton flexcen" :class="message.receive? 'message-signButton-receive':''">{{message.receive? '  已签收':'未签收'}}</div>
              </div>
            </div>
            <!-- 视频通话 -->
            <div :class="message.sender==='me'?'message-me':'message-other'" v-if="message.type == 'videoCall' ">
                <div  :style="{'flex-direction': message.sender==='me'? 'row':'row-reverse'}" class="flexal">
                    <div class="meesage-file-text" :style="{'width': '100%','margin-left':message.sender==='me'? '0px':'10px',
                    'margin-right':message.sender==='me'? '10px':'0px'}">{{message.content}}</div>
                    <img :src="require('@/assets/img/messageRight/videoCall.png')"  style="width: 25px;height: 15px;" />
                </div>
            </div>
            <!-- 语音通话 -->
            <div :class="message.sender==='me'?'message-me':'message-other'" v-if="message.type == 'audioCall' ">
                <div  :style="{'flex-direction': message.sender==='me'? 'row':'row-reverse'}" class="flexal">
                    <div class="meesage-file-text" :style="{'width': '100%','margin-left':message.sender==='me'? '0px':'10px',
                    'margin-right':message.sender==='me'? '10px':'0px'}">{{message.content}}</div>
                    <img :src="require('@/assets/img/messageRight/audioCall.png')"  style="width: 25px;height: 15px;" />
                </div>
            </div>
             <!-- 视频会议消息 -->
             <div :class="message.sender==='me'?'message-me':'message-other'" v-if="message.type == 'meeting' " style="width: 250px;">
              <div class="flexal" style="margin-bottom: 5px;">
                <img :src="require('@/assets/img/messageRight/videoMeeting.png')"  style="width: 21px;height: 15px;margin-right: 10px;" />
                <div class="meesage-file-text" style="width: 100%;font-size: 16px;">{{ message.content }}</div>
              </div>
              <div class="flexal" style="margin-bottom: 5px;">
                <img :src="require('@/assets/img/messageRight/meetingID.png')"  style="width: 21px;height: 15px;margin-right: 10px;" />
                <div class="meesage-file-text" style="width: 100%;">{{ message.content }}</div>
              </div>
              <div class="flexal" style="margin-bottom: 5px;">
                <img :src="require('@/assets/img/messageRight/meetingPeople.png')"  style="width: 21px;height: 16px;margin-right: 10px;" />
                <div style="overflow: hidden;width: 80%;white-space: nowrap;">
                <img :src="img"  style="width: 25px;height: 25px;margin-right: 10px;border-radius: 50%;" v-for="(img,key) in message.peopleList" :key="key" />
                </div>
              </div>
              <div class="meetingButton flexcen" :class="message.finish? 'meetingButton-end':''">{{message.finish? '已结束':'正在进行中'}}</div>
              <!-- <div style="width: 100%;height: 0px;border: 1px solid #002565;opacity: 0.26;margin-top: 10px;"></div>
              <div style="width: 100%;" class="flexcen">
                <div class="message-signButton flexcen" :class="message.receive? 'message-signButton-receive':''">{{message.receive? '  已签收':'未签收'}}</div>
              </div> -->
            </div>
            <!-- 是否已读 -->
            <div style="flex-direction: column-reverse;height: 100%;display: flex;margin-left: 10px;" v-if="message.sender!='me'" class="message-read" :class="message.read == 1? '':'message-read-active'">{{message.read ==1? '已读':'未读'}}</div>
            <div v-else class="message-read" style="margin-top: 6px;" :class="message.read == 1? '':'message-read-active'">{{message.read ==1? '已读':'未读'}}</div>
            
          </div>
          </div>
        </div>
      </div>
      
          </div>

          <!-- 审批内容 -->
          <div class="content-frame" style="height: 750px;" v-infinite-scroll="scrollLoad" v-if="messageDetail.type == 2">
            <div v-for="(message, index) in auditList" :key="index" @click="openAudit(index)">
              <!-- 消息时间 -->
              <div class="chat-time flexcen">{{message.time}}</div>

        <!-- 消息整体-->
        <div :class="message.sender==='me'?'chat-message-me':'chat-message-other'"
             :style="{'padding-bottom':messages.length-1===index?'2rem':'none'}"
             >
          <!-- 消息头像-->
          <div :class="message.sender==='me'?'message-me-asWhole-headPortrait':'message-other-asWhole-headPortrait'">
            <img :src="messageDetail.avatar" class="examineeFace_logo_style">
          </div>
          <!--          消息-->
          <div :class="message.sender==='me'?'message-me-asWhole-right':'message-other-asWhole-right'">
            <!-- 文本消息 -->
            <div :class="message.sender==='me'?'':'flexal'">
             <!-- 审批消息 -->
             <div :class="message.sender==='me'?'message-me':'message-other'"  style="max-width: 441px;margin-top:0px">
              <div style="font-weight: 400;font-size: 16px;color: #15181D;">审批</div>
              <div style="font-weight: 500;font-size: 16px;color: #000000;">{{message.tips}}</div>
              <div class="audit-content">
                <div style="font-weight: 400;font-size: 14px;color: #15181D;margin-left: 14px;">{{message.content}}</div>
                <div style="font-weight: 400;font-size: 12px;color: #6C707B;margin-left: 14px;margin-top: 5px;">{{message.tipsTime}}</div>
              </div>
              <div class="aduitButton flexcen">{{message.finish? '查看详情':'查看并处理'}}</div>
            </div>
          </div>
          </div>
        </div>
      </div>
          </div>

          <!-- 公告内容 -->
          <div class="content-frame" style="height: 750px;" v-infinite-scroll="scrollLoad" v-if="messageDetail.type == 3">
            <div v-for="(message, index) in auditList" :key="index">
              <!-- 消息时间 -->
              <div class="chat-time flexcen">{{message.time}}</div>

        <!-- 消息整体-->
        <div :class="message.sender==='me'?'chat-message-me':'chat-message-other'"
             :style="{'padding-bottom':messages.length-1===index?'2rem':'none'}"
             >
          <!-- 消息头像-->
          <div :class="message.sender==='me'?'message-me-asWhole-headPortrait':'message-other-asWhole-headPortrait'">
            <img :src="messageDetail.avatar" class="examineeFace_logo_style">
          </div>
          <!--          消息-->
          <div :class="message.sender==='me'?'message-me-asWhole-right':'message-other-asWhole-right'">
            <!-- 文本消息 -->
            <div :class="message.sender==='me'?'':'flexal'">
             <!-- 审批消息 -->
             <div :class="message.sender==='me'?'message-me':'message-other'"  style="max-width: 461px;margin-top:0px;padding: 0px 0px;padding-bottom: 15px; border-radius: 16px;">
              <img :src="poster"  style="width: 461px;height: 194px; border-radius: 16px 16px 0px 0px;" />
              <div style="font-weight: 400;font-size: 12px;color: #000000;margin-top: 5px;margin-left: 11px;" class="ellipsis">标题文字内容标题文字内容标题文字内容内容内容内容内容内容内容内容。标题文字内容标题文字内容标题文字内容内容内容内容内容内容内容内容。</div>
              <div class="message-line" style="margin-left: 12px;margin-top: 10px;"></div>
              <div style="font-weight: 400;font-size: 10px;color: #333333;margin-top: 10px;margin-left: 12px;">点击查看详情</div>
            </div>
          </div>
          </div>
        </div>
      </div>
          </div>
          <!-- 机器人内容 -->
          <div class="content-frame" style="height: 670px;" v-infinite-scroll="scrollLoad" v-if="messageDetail.type == 5">
            <div v-for="(message, index) in robotList" :key="index">
              <!-- 消息时间 -->
              <!-- <div class="chat-time flexcen" v-if="message.type=='time'">{{message.content}}</div> -->
        <!-- 消息整体(这个数据不包括时间)-->
        <div :class="message.sender==='me'?'chat-message-me':'chat-message-other'"
             :style="{'padding-bottom':messages.length-1===index?'2rem':'none'}"
             v-if="message.type!='time'"
             >
            
          <!--            消息头像-->
          <div :class="message.sender==='me'?'message-me-asWhole-headPortrait':'message-other-asWhole-headPortrait'">
            <img :src="messageDetail.avatar" class="examineeFace_logo_style">
          </div>
          <!--          消息-->
          <div :class="message.sender==='me'?'message-me-asWhole-right':'message-other-asWhole-right'">
            <!--            消息上面-->
            <div :class="message.sender==='me'?'message-me-asWhole-top':'message-other-asWhole-top'" v-if="message.sender == 'me'">
              考生
            </div>
            <!-- 文本消息 -->
            <div :class="message.sender==='me'?'':'flexal'">
            <div :class="message.sender==='me'?'message-me':'message-other'" style="max-width: 100%;">
              <!-- {{ message.content }} -->
                <div v-html="message.content"></div>
            </div>
          </div>
          </div>
        </div>
      </div>
          </div>

          <!-- 通知集成内容 -->
          <div class="content-frame" style="height: 750px;" v-infinite-scroll="scrollLoad" v-if="messageDetail.type == 6">
            <div v-for="(message, index) in auditList" :key="index">
              <!-- 消息时间 -->
              <div class="chat-time flexcen">{{message.time}}</div>

        <!-- 消息整体-->
        <div :class="message.sender==='me'?'chat-message-me':'chat-message-other'"
             :style="{'padding-bottom':messages.length-1===index?'2rem':'none'}"
             style="padding: 1rem 33px;"
             >
          <!-- 消息头像-->
          <!-- <div :class="message.sender==='me'?'message-me-asWhole-headPortrait':'message-other-asWhole-headPortrait'">
            <img :src="messageDetail.avatar" class="examineeFace_logo_style">
          </div> -->
          <!--          消息-->
          <div :class="message.sender==='me'?'message-me-asWhole-right':'message-other-asWhole-right'">
            <!-- 文本消息 -->
            <div :class="message.sender==='me'?'':'flexal'">
             <!-- 审批消息 -->
             <div :class="message.sender==='me'?'message-me':'message-other'"  style="max-width: 650px;width: 650px; margin-top:0px;padding: 0px 0px;padding-bottom: 15px; border-radius: 16px;">
              <div style="font-weight: 500;font-size: 18px;color: #000000;margin-top: 23px;margin-left: 21px;" class="ellipsis">金蝶系统通知</div>
              <div style="font-weight: 400;font-size: 16px;color: #000000;margin-top: 10px;margin-left: 21px;margin-right: 21px;">文字内容标题文字内容标题文字内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
            </div>
            <!-- <div class="bell-content"></div> -->
          </div>
          </div>
        </div>
      </div>
          </div>

      <!-- 输入框 -->
      <div class="frame-input flexal" v-if="messageDetail.type <= 1 || messageDetail.type == 5|| messageDetail.type == 4">
        <div class="frame-border flexal">
          <el-input style="width: 555px;margin-left: 12px;background: #F6F6F6;border: 0px solid #DCDFE6;" v-model="content"  placeholder="输入消息"></el-input>
          <img :src="require('@/assets/img/messageRight/add.png')"  style="width: 25px;height: 25px;margin-left: 22px;" />
          <img :src="require('@/assets/img/messageRight/send.png')"  style="width: 23px;height: 23px;margin-left: 24px;" />
        </div>
      </div>
      
      <!-- <telephonePop :dialogVisibleShow="dialogVisibleTelePhone"></telephonePop> -->
      
     </div>

     <div class="frame-message " v-else>
      </div>
    
  </template>
  
  <script>
  import optMessage from './optMessage.vue';
  import documentFrame from './documentFrame.vue';
  import afficheFrame from './afficheFrame.vue';
  import signInFrame from './signInFrame.vue';
  import auditFrame from './auditFrame.vue';
  import telephonePop from '../pop-up/telephonePop.vue'
  import longFrame from './longFrame.vue';

  export default {
    name: 'message',
    props: {
      messageDetail: {
            type: Object,
            default: {}
      }
    },
   
    data() {
        return {
            src: 'https://cdn.uviewui.com/uview/album/1.jpg',       //用户头像路径(模拟用)
            poster:"https://luosai.oss-cn-shenzhen.aliyuncs.com/Upload/2024/0712/202407121752186069.png",     //公告图片                                             
            avatarList:[],
            avatar:require('@/assets/img/messageRight/group.png'),  //最顶部聊天界面头像
            group:1,                      //是否群聊天(暂未用到)
                optList:[
            {
                text:'消息',
                icon:require('@/assets/img/messageRight/message.png'),
                activeIcon:require('@/assets/img/messageRight/messageIcon.png'),
                type:0
            },{
                text:'云文档',
                icon:require('@/assets/img/messageRight/cloud.png'),
                activeIcon:require('@/assets/img/messageRight/cloudIcon.png'),
                type:0
            },{
                text:'群公告',
                icon:require('@/assets/img/messageRight/notice.png'),
                activeIcon:require('@/assets/img/messageRight/noticeIcon.png'),
                type:1
            },{
                text:'文件',
                icon:require('@/assets/img/messageRight/file.png'),
                activeIcon:require('@/assets/img/messageRight/fileIcon.png'),
                type:0
            },
            {
                text:'签收消息',
                icon:require('@/assets/img/messageRight/sign.png'),
                activeIcon:require('@/assets/img/messageRight/signIcon.png'),
                type:0
            },
            ],
            optListIndex:0, //群名称下方的操作栏
            // 消息数据集(type有文本，图片，视频，文件，时间)
            // sender:发送人，content：文本内容，type:类型，read:是否已读，receive:是否签收，suffix：文件后缀，size：文件大小
            messages: [
            {sender: 'other', content: '文字',type:'sign',read:1,receive:0},
            {sender: 'me', content: '文字',type:'sign',read:1,receive:1},
            {sender: 'me', content: '通话时长 0:07',type:'videoCall',read:1,receive:1},
            {sender: 'other', content: '对方已拒绝',type:'videoCall',read:1,receive:1},
            {sender: 'other', content: '已取消',type:'videoCall',read:1,receive:1},
            {sender: 'me', content: '你好！',type:'text',read:0},
            {sender: 'other', content: '你好啊！',type:'text',read:0},
            {sender: 'other', content: '请问有什么我可以帮助你的吗？',type:'text',read:0},
            {sender: 'me', content: '我正在寻找一家好的餐厅。',type:'text',read:1},
            {sender: 'other', content: '你在哪个城市？',type:'text',read:1},
            {sender: 'me', content: '我在北京。',type:'text',read:1},
            {sender: 'me', content: '13:52',type:'time',read:1},
            {sender: 'other', content: '好的，我可以为您推荐一些北京的餐厅。您需要什么类型的餐厅？',type:'text',read:1},
            {sender: 'me', content: '我想要吃火锅。',type:'text',read:1},
            {sender: 'other', content: '好的，以下是我为您推荐的北京火锅餐厅列表：[餐厅1，餐厅2，餐厅3]。您需要我帮您预约吗？',type:'text',read:1},
            {sender: 'other', content: 'https://cdn.uviewui.com/uview/album/1.jpg',type:'image',read:1},
            {sender: 'other', content: 'https://www.zhongjiangwenhua.com/Upload/2024/0609/202406091540414772.jpg',type:'image',read:1},
            {sender: 'me', content: 'https://luosai.oss-cn-shenzhen.aliyuncs.com/Upload/Video/2024/0730/202407301050064716.mp4',type:'video',read:1},
            {sender: 'me', content: '不需要，我会自己预约。谢谢您的帮助！',type:'text',read:1},
            {sender: 'other', content: '不客气，祝您用餐愉快！',type:'text',read:1},
            {sender: 'other', content: '通话时长 0:07',type:'audioCall',read:1,receive:1},
            {sender: 'me', content: '对方已拒绝',type:'audioCall',read:1,receive:1},
            {sender: 'me', content: '已取消',type:'audioCall',read:1,receive:1},
            {sender: 'me', content: '再见！',type:'text',read:1},
            {sender: 'other', content: '再见！',type:'text',read:1},
            {sender: 'other', content: '标题内容文字文字文文字标题内容文字文字文文字.pdf',type:'file',read:1,suffix:'pdf',size:'100KB'},
            {sender: 'other', content: '视频会议名称',type:'meeting',read:1,meetingId:'会议ID:1234567',
            peopleList:['https://cdn.uviewui.com/uview/album/1.jpg','https://cdn.uviewui.com/uview/album/2.jpg','https://cdn.uviewui.com/uview/album/3.jpg',
              'https://cdn.uviewui.com/uview/album/1.jpg','https://cdn.uviewui.com/uview/album/2.jpg','https://cdn.uviewui.com/uview/album/3.jpg',
              'https://cdn.uviewui.com/uview/album/1.jpg','https://cdn.uviewui.com/uview/album/2.jpg','https://cdn.uviewui.com/uview/album/3.jpg',
            ],
            finish:0,
            },
            {sender: 'me', content: '视频会议名称',type:'meeting',read:0,meetingId:'会议ID:1234567',
            peopleList:['https://cdn.uviewui.com/uview/album/1.jpg','https://cdn.uviewui.com/uview/album/2.jpg','https://cdn.uviewui.com/uview/album/3.jpg',
              'https://cdn.uviewui.com/uview/album/1.jpg','https://cdn.uviewui.com/uview/album/2.jpg','https://cdn.uviewui.com/uview/album/3.jpg',
              'https://cdn.uviewui.com/uview/album/1.jpg','https://cdn.uviewui.com/uview/album/2.jpg','https://cdn.uviewui.com/uview/album/3.jpg',
            ],
            finish:1,
            },
            ],

            auditList:[
           
            {
            sender: 'other', 
            tips:'@张三，请查收今日待处理审批单',
            content: '李四提交的XX申请',
            finish:0,
            time:'2024-08-01',
            tipsTime:'2024.08.07  10:00'
            },
            {
            sender: 'other', 
            tips:'@张三，请查收今日待处理审批单',
            content: '李四提交的XX申请',
            finish:1,
            time:'2024-08-01',
            tipsTime:'2024.08.07  10:00'
            },
            {
            sender: 'other', 
            tips:'@张三，请查收今日待处理审批单',
            content: '李四提交的XX申请',
            finish:2,
            time:'2024-08-01',
            tipsTime:'2024.08.07  10:00'
            },
          ],
            
          robotList:[
            {
              sender: 'other', 
              content: `<h1>李拴蛋</h1>
              <a href="http://www.baidu.com">百度</a>
              <span style="color:red">红色文字</span><br>
              <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg">
              `,
              time:'2024-08-01',
            },
            {
              sender: 'me', 
              content: '测试文本',
              time:'2024-08-01',
            }
          ],

            content:'',                                //文本输入
            noticeShow:true,                          //是否显示公告
             // 组织成员
             list:[
                {
                    name:'王小二',
                    avatar:'https://cdn.uviewui.com/uview/album/1.jpg',
                    checked:false
                },
                {
                    name:'王小明',
                    avatar:'https://cdn.uviewui.com/uview/album/2.jpg',
                    checked:false
                },
                {
                    name:'李二',
                    avatar:'https://cdn.uviewui.com/uview/album/3.jpg',
                    checked:false
                },
                {
                    name:'张三',
                    avatar:'https://cdn.uviewui.com/uview/album/4.jpg',
                    checked:false
                },
                {
                    name:'老四',
                    avatar:'https://cdn.uviewui.com/uview/album/5.jpg',
                    checked:false
                },
                {
                    name:'王五',
                    avatar:'https://cdn.uviewui.com/uview/album/6.jpg',
                    checked:false
                },
                {
                    name:'老六',
                    avatar:'https://cdn.uviewui.com/uview/album/7.jpg',
                    checked:false
                },
                {
                    name:'老王',
                    avatar:'https://cdn.uviewui.com/uview/album/8.jpg',
                    checked:false
                },
                {
                    name:'老李',
                    avatar:'https://cdn.uviewui.com/uview/album/9.jpg',
                    checked:false
                },
            ],
            auditIndex:0,                             //点击审批详情下标
            phoneShow:false,                          //视频通话和语音通话弹窗
            falg:true,                                 //衔接参数
            openComputer:false,                       //远程控制弹窗
            falgs:false,                              //远程弹窗衔接参数
            longFrameType:0,                          //远程桌面控制/邀请
            setStart:false,                           //设为星标联系人 
            openInfoFrame:false,                      //个人信息弹窗
            falg2:false,                              //个人弹窗衔接参数
        }
    },
    watch: {
      messageDetail: {
      handler (newValue,oldValue) { //这是vue的规定写法，当你watch的值发生变化的时候，就会触发这个handler，这是vue内部帮你做的事情
        // console.log('数组变化',newValue,oldValue)
        this.optListIndex = 0
      },
      deep: true,  // 可以深度检测到 obj 对象的属性值的变化
      immediate: true //刷新加载  立马触发一次handler
    },
    },
    created(){
      document.addEventListener("click", this.myFunction);
    },
    components:{
      optMessage,                     //右侧菜单栏
      documentFrame,                  //云文档/文件
      afficheFrame,                   //公告
      signInFrame,                    //签收消息
      auditFrame,                     //审核详情
      telephonePop,                   //语音通话/视频通话弹窗
      longFrame,                      //远程桌面
    },
    computed:{
      // 文件消息图标
        fileIcon(){
            let fileIcon = []
            fileIcon['ppt'] = require('@/assets/img/messageRight/ppt.png')
            fileIcon['pdf'] = require('@/assets/img/messageRight/pdf.png')
            fileIcon['word'] = require('@/assets/img/messageRight/word.png')
            fileIcon['xlx'] = require('@/assets/img/messageRight/xlx.png')
            fileIcon['package'] = require('@/assets/img/messageRight/package.png')
            // console.log('fileIcon',fileIcon['ppt'])
            return fileIcon
        }
    },
    methods:{
      // 切换导航栏
        chooseTabIndex(index){
          // if(index>1){
          //   this.$message({
          //     message: '开发中，敬请等待',
          //     type: 'warning'
          //   });
          //   return
          // }
          this.optListIndex = index
        },
        // 打开右侧操作栏
        openOptShow(){
          var that = this
          that.optShow = !this.optShow
          this.$overlay.show();
        },
        // 打开审批详情
        openAudit(index){
          this.auditShow = !this.auditShow
          this.auditIndex = index
          this.$overlay.show();
        },
        // 滑底
        scrollLoad(){
        console.log('滑底触发')
      },
      // 群公告界面按钮回调
      afficheSubimt(args){
        console.log('回调参数',args)
          this.chooseTabIndex(0)
      },
      // 签收消息发送页面回调
      signInSubmit(args){
        console.log('签收消息回调',args)
        this.chooseTabIndex(0)
      },
      // 鼠标移入1
      onMouseOverO(item) {
            this.phoneShow = true
        },
        // 鼠标移出1
        onMouseOutO() {
            setTimeout(() => {
                if (this.falg) {
                    this.phoneShow = false
                }
            }, 100)
        },
        // 鼠标移入2
        onMouseOverT() {
            this.falg = false
        },
        // 鼠标移出2
        onMouseOutT() {
            this.falg = true
            this.phoneShow = false
        },

        // 鼠标移入1
      onMouseOver2(item) {
            this.openComputer = true
        },
        // 鼠标移出1
        onMouseOut2() {
            setTimeout(() => {
                if (this.falgs) {
                    this.openComputer = false
                }
            }, 100)
        },
        // 鼠标移入2
        onMouseOver3() {
            this.falgs = false
        },
        // 鼠标移出2
        onMouseOut3() {
            this.falgs = true
            this.openComputer = false
        },

         // 鼠标移入1
      onMouseOver4(item) {
            this.openInfoFrame = true
        },
        // 鼠标移出1
        onMouseOut4() {
            setTimeout(() => {
                if (this.falg2) {
                    this.openInfoFrame = false
                }
            }, 100)
        },
        // 鼠标移入2
        onMouseOver5() {
            this.falg2 = false
        },
        // 鼠标移出2
        onMouseOut5() {
            this.falg2 = true
            this.openInfoFrame = false
        },
        // 开启语音/视频通话
        openTelePhone(){
          this.$overlayPhone.show()
          console.log(this.$overlayPhone.show())
        },
        // 开启远程桌面
        openLongFrame(index){
          this.longFrameShow = true
          this.longFrameType = index
        },
        // 关闭远程桌面
        longFrameSubmit(){
          this.longFrameShow = false
        }
    }
  }
  </script>

  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped lang="less">

.frame-message{
    margin-top: 31px;
    margin-left: 12px;
    width: 726px;
    height: 851px;
    background: #FFFFFF;
    border-radius: 16px 16px 16px 16px;

    .title-text{
      font-weight: 500;
      font-size: 16px;
      color: #333333;
    }
    .title-frame{
      padding: 23px 22px;
      border-bottom: 1px solid #C9C9C9;
      .avatar {
          width: 52px;
          height: 52px;
          overflow: hidden;
          display: flex;
          justify-content: center;
          align-items: center;
          align-content: center;
          flex-wrap: wrap-reverse;
          border: 2px solid #36A8F4;
          border-radius: 50%;
          margin-left: 12px;
          // border: #000 1px solid;
          // margin: 30px;
     

      .avatarImg {
          width: 52px;
          height: 52px;
      }

      .avatarItem--1 {
          width: 98%;
          height: 98%;
      }

      .avatarItem--2 {
          width: 47%;
          height: 47%;
          margin: 1%;
      }

      .avatarItem--3 {
          width: 32%;
          height: 30%;
          margin: 1%;
      }
    }

    .title-content{
      margin-left: 12px;
      flex: 1;
    }

    
    .title-num{
      margin-top: 2px;
      margin-left: 2px;
      font-weight: 400;
      font-size: 13px;
      color: #858A99;
    }
    .title-item{
      margin-right: 11px;
      background: #E9E9E9;
      border-radius: 9px 9px 9px 9px;
      padding: 3px 9px;
    }
    .title-item-active{
      background: #366EF4;
    }
    .title-text-item{
      margin-left: 5px;
      font-weight: 400;
      font-size: 12px;
      color: #535D6D;
    }
    .title-text-item-active{
      color: #FFFFFF;
    }
    }

    
    .imgIcon-avatar{
        width: 52px;
        height: 52px;
        border-radius: 50%;
        margin-left: 12px;
      }

      .content-frame{

        // height: 612px;
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
        overflow-y: auto;
        overflow-x: hidden;

        .chat-message-other {
          /*background-color: red;*/
          display: flex;
          padding-left: 22px;
          padding-top: 1rem;
        }

        .chat-message-me {
          /*background-color: red;*/
          display: flex;
          padding-right: 22px;
          padding-top: 1rem;
          flex-direction: row-reverse; /* 将子div的顺序反转 */

        }

        .message-me-asWhole-headPortrait {
          padding: 3px;
        }

        .message-other-asWhole-headPortrait {
          padding: 3px;
        }

        .message-me-asWhole-right {
          display: flex;
          flex-direction: column; /* 设置子元素垂直排列 */
          margin-left: 0.1rem;
        }

        .message-other-asWhole-right {
          display: flex;
          flex-direction: column; /* 设置子元素垂直排列 */
          margin-left: 0.1rem;
        }

        .message-me-asWhole-top {
          padding: 3px;
          font-weight: 400;
          font-size: 15px;
          color: #6E6E6E;
          padding: 3px;
          color: rgba(134, 144, 156, 1);
          text-align: right;
        }

        .message-other-asWhole-top {
          padding: 3px;
          font-weight: 400;
          font-size: 15px;
          color: #6E6E6E;
          padding: 3px;
          color: rgba(134, 144, 156, 1);
        }

        .message-me {
          margin-top: 10px;
          // background-color: rgba(242, 243, 245, 1);
          background: #F2F2F2;
          max-width: 280px;
          word-wrap: break-word; /* 处理英文单词换行 */
          word-break: break-all; /* 处理中文换行 */
          display: inline-block; /*将div元素转换为行内块元素*/
          width: auto; /* 宽度根据文本宽度自动调正*/
          padding: 13px 15px;
          border-radius: 4px;
          font-weight: 400;
          font-size: 14px;
          color: #333333;
          border-radius: 8px;
        }

        .message-other {
          margin-top: 10px;
          // background-color: rgba(242, 243, 245, 1);
          background: #F2F2F2;
          max-width: 280px;
          word-wrap: break-word; /* 处理英文单词换行 */
          word-break: break-all; /* 处理中文换行 */
          display: inline-block; /*将div元素转换为行内块元素*/
          width: auto; /* 宽度根据文本宽度自动调正*/
          padding: 13px 15px;
          border-radius: 4px;
          font-weight: 400;
          font-size: 14px;
          color: #333333;
          border-radius: 8px;
        }


        .examineeFace_logo_style {
          width: 52px;
          height: 52px;
          border-radius: 50%;
        }

        .chat-time{
          width: 100%;
          margin-top: 24px;
          font-weight: 400;
          font-size: 13px;
          color: #858585;
        }
      }
      .frame-notice{
        // position: fixed;
        width: 690px;
        height: 45px;
        background: #F2F2F2;
        border-radius: 15px 15px 15px 15px;
        margin-top: 13px;
        margin-left: 18px;
      }

      .notice-content{
        margin-left: 16px;
        font-size: 14px;
        color: #070707;
      }

      .frame-notice-title{
        width: 100%;
        margin-top: 23px;
      }

      .notice-title{
        font-size: 20px;
        color: #000000;
      }
      .notice-title-tips{
        margin-top: 14px;
        font-weight: 400;
        font-size: 14px;
        color: #858585;
      }
      .notcie-title-button{
        width: 136px;
        height: 42px;
        background: #FFFFFF;
        border-radius: 16px 16px 16px 16px;
        border: 1px solid #929292;
        font-size: 16px;
        font-weight: 400;
        color: #333333;
      }

      .tips-name{
        font-weight: 400;
        font-size: 16px;
        color: #0052D9;
        // width: 100%;
      }
      .meesage-img {
            max-width: 240px;
            max-height: 240px;
            border-radius: 4px;
        }
      .message-read{
        font-weight: 400;
        font-size: 15px;
        color: #6E6E6E;
      }
      .message-read-active{
        color: #36A8F4;
      }

      .frame-input{
        padding: 17px 22px;
        // position: absolute;
        // margin-bottom: 0px;
        .frame-border{
          width: 686px;
          height: 45px;
          border-radius: 16px 16px 16px 16px;
          border: 1px solid #707070;
        }
        .el-input__inner{
          width: 555px;
          height: 33px;
          background: #F6F6F6;
          border: 0px solid #DCDFE6;
        }
      }
      .meesage-file-text{
            font-weight: 400;
            color: #333333;
            font-size: 14px;
            width: 154px;
            display: -webkit-box;          /* 需要使用 -webkit- 前缀 */
            -webkit-box-orient: vertical;  /* 垂直布局 */
            overflow: hidden;              /* 隐藏超出的内容 */
            text-overflow: ellipsis;       /* 省略号 */
            -webkit-line-clamp: 2;         /* 显示的行数 */
        }
        .meesage-file-text1{
            margin-top: 5px;
            font-weight: 400;
            font-size: 13px;
            color: #6E6E6E;
        }
      .message-signButton{
        margin-top: 10px;
        width: 90px;
        height: 25px;
        border-radius: 8px 8px 8px 8px;
        border: 2px solid #FF3400;
        color: #FF3400;
        font-weight: 400;
        font-size: 14px;
      }

      .message-signButton-receive{
        border: 2px solid #858A99;
        color: #858A99;
      }
    
      .meetingButton{
        margin-top: 15px;
        width: 100%;
        height: 30px;
        font-size: 16px;
        color: #0052D9;
        font-weight: 400;
        border-radius: 8px 8px 8px 8px;
        border: 1px solid #0052D9;
      }
      .meetingButton-end{
        border: 1px solid #858A99;
        color: #858A99;
      }
      .audit-content{
        margin-top: 10px;
        width: 414px;
        // height: 62px;
        background: #E2E2E2;
        border-radius: 0px 0px 0px 0px;
        padding: 11px 0px;
      }
      .aduitButton{
        margin-top: 23px;
        width: 100%;
        height: 44px;
        background: #0052D9;
        border-radius: 16px 16px 16px 16px;
        font-size: 16px;
        color: #FFFFFF;
      }
      .frame-video-block{
        margin-top: 8px;
        margin-left: -50px;
        position: absolute;
        width: 136px;
        height: 106px;
        background: #FFFFFF;
        box-shadow: 0px 3px 15px 1px rgba(0,0,0,0.16);
        border-radius: 16px 16px 16px 16px;
        z-index: 101;
      }

      .info-frame{
        position: absolute;
        width: 424px;
        height: 508px;
        background: #FFFFFF;
        box-shadow: 0px 3px 19px 1px rgba(0,0,0,0.2);
        border-radius: 24px 24px 24px 24px;
        z-index: 10;
        // background: #FFFFFF;
        background-image: url('../../assets/img/messageRight/23c0b764fde8a302d22f7b078586239.png'); /* 替换为实际的图片路径 */
        background-size: cover; /* 确保背景图像覆盖整个容器 */
        background-position: center; /* 将背景图像居中对齐 */
        background-repeat: no-repeat; /* 避免背景图像重复 */
      }
      .info-frame-item{
        margin-left: 9px;
        width: 124px;
        // width: 33%;
        height: 68px;
        background: #F5F6F8;
        border-radius: 16px 16px 16px 16px;
      }
      .info-frame-buttom{
        margin-top: 32px;
        margin-left: 18px;
        width: 388px;
        height: 113px;
        background: #F5F6F8;
        border-radius: 24px 24px 24px 24px;
      }
  }
  .message-line{
    width: 437px;
    height: 0px;
    border: 1px solid #707070;
    opacity: 0.24;
  }
  ::-webkit-scrollbar {
    width: 6px; /*对垂直流动条有效*/
    height: 6px; /*对水平流动条有效*/
  }
  </style>
  